import { Button, Modal, Steps } from 'antd';
import { useState, useEffect, useContext, useRef } from 'react';
import ZhpgContext from '../ZhpgContext';
import './index.less';
import MapGenerator from './MapGenerator';
import Scbg from './Scbg';
import Zqxq from './Zqxq';
export default function Bgsc(props) {

    const [currentStep, setCurrentStep] = useState(0);
    const [result, setResult] = useState({})
    const [loading, setLoading] = useState();

    const { zhData, yxfxData } = useContext(ZhpgContext);
    const mapRef = useRef();

    const items = [{
        key: 0,
        title: '灾情详情'
    }, {
        key: 1,
        title: '影响范围'
    }, {
        key: 2,
        title: '救援专题'
    }, {
        key: 3,
        title: '撤离专题'
    }, {
        key: 4,
        title: '物资储备专题'
    }, {
        key: 5,
        title: '生成报告'
    }]

    return <Modal wrapClassName='bgsc-modal' title={"报告生成"} onCancel={e => props.onClose?.()} open={true} bodyStyle={{
        height: 600
    }} width={1200} footer={[
        <Button type="primary" disabled={currentStep === 0} onClick={e => {
            setCurrentStep(currentStep => --currentStep)
        }}>上一步</Button >,
        <Button loading={loading} type="primary" disabled={(currentStep === items.length - 1) || (!zhData) || (!yxfxData)} onClick={e => {
            if (mapRef.current?.loadData) {
                setLoading(true)
                mapRef.current?.loadData?.()?.then(data => {
                    setResult(result => {
                        return {
                            ...result,
                            ['mapData' + currentStep]: data
                        }
                    })
                    setCurrentStep(currentStep => ++currentStep)
                }).finally(e => {
                    setLoading(false)
                });
            } else {
                setCurrentStep(currentStep => ++currentStep)
            }
        }}>下一步</Button>
    ]}>
        <div className='wh100 layout-v'>
            <Steps items={items} current={currentStep} onChange={current => {
               // setCurrentStep(current)
            }}></Steps>
            {currentStep === 0 && <Zqxq />}
            {currentStep === 1 && <MapGenerator step={currentStep} ref={mapRef} />}
            {currentStep === 2 && <MapGenerator step={currentStep} ref={mapRef} />}
            {currentStep === 3 && <MapGenerator step={currentStep} ref={mapRef} />}
            {currentStep === 4 && <MapGenerator step={currentStep} ref={mapRef} />}
            {currentStep === 5 && <Scbg result={result} />}
        </div>
    </Modal>
}